<template>
<div class="user">
<user-bar :info="userInfo"/>
  <div class="user-container">
    <div class="nav-menu">
      <ul>
        <li v-for="(item,index) in navMenu" :key="index" @click="goPage(item.path)" :class="{active : item.alias === active}">{{item.name}}</li>
      </ul>
    </div>
    <div class="box">
      <router-view />
    </div>
  </div>
  <el-affix position="bottom" :offset="20" class="fixed-btn">
    <el-dropdown>
      <el-button  circle>
        <el-icon :size="20"><house /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="(item,index) in navMenu" :key="index" @click="goPage(item.path)" :class="{act : item.alias === active}">{{item.name}}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-affix>
</div>
</template>

<script>
import UserBar from "../../components/user/UserBar";
import {reactive, toRefs} from "@vue/reactivity";
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import {watch} from "vue";
import {onMounted} from "@vue/runtime-core";
import {
  House,
} from '@element-plus/icons'
export default {
  name: "UserIndex",
  components: {UserBar,House},
  setup(){
      const store = useStore()
      const route = useRoute()
      const router= useRouter()
      const state = reactive({
        userInfo : store.getters['user/userInfo'],
        navMenu:[
          {
            name: '个人信息',
            alias:'Profile',
            path: '/user/profile',
          },
          {
            name: '捐献入口',
            alias: 'Donate',
            path: '/user/donate',
          },
          {
            name: '积分兑换',
            alias: 'Shop',
            path: '/user/shop',
          },
          {
            name: '消费记录',
            alias: 'Expense',
            path: '/user/expense',
          },
          {
            name: '捐献记录',
            alias: 'DonateLogs',
            path: '/user/donateLogs',
          },
          {
            name: '消息盒子',
            alias: 'Message',
            path: '/user/Message',
          }
        ],
        active:''
      })
      const methods = {
        goPage(url) {
          router.push(url)
        }
      }
      watch(()=>route.name,val => {
        state.active = val
      })
      onMounted(()=>{
        state.active = route.name
      })
      return {
        ...toRefs(state),
        ...methods
      }
  }
}
</script>

<style scoped>
.user{
  width: 100%;
}
.user-container{
  width: 100%;
  display: flex;
  clear: both;
}
.nav-menu ul{
  width: 245px;
}
.nav-menu ul li{
  cursor: pointer;
  border-bottom: 1px solid #d3dce6;
  list-style: circle;
}
.box {
  width: calc(100% - 300px);
  padding: 20px;
  min-height: 600px;
}
.nav-menu ul .active{
  border-right: 4px solid var(--el-color-primary-light-3);
}
.fixed-btn{
  display: none;
}
.act{
  color: var(--el-color-primary-light-3);
}
@media only screen and (max-width:760px){
  .nav-menu{
    display: none;
  }
  .box {
    width: 100%;
  }
  .fixed-btn{
    display: block;
  }
}
</style>